<!DOCTYPE html>
<html ng-app="dietitian">

<head>
<title>専属栄養士</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"></meta>
<meta charset="UTF-8">
<link rel='stylesheet' href='/bower_components/bootstrap/dist/css/bootstrap.min.css' />
<link rel='stylesheet' href='/stylesheets/dashboard.css' />
<script src="/socket.io/socket.io.js"></script>
<% if (release_mode == 'production'){ %>
    <script type="text/javascript" src="javascripts/dist/dietitian.min.js"></script>
<% } else { %>
    <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
    <script type="text/javascript" src="bower_components/chart.js/dist/Chart.min.js"></script>
    <script type="text/javascript" src="javascripts/dietitian/module.js"></script>
    <script type="text/javascript" src="javascripts/dietitian/rootCtl.js"></script>
    <script type="text/javascript" src="javascripts/dietitian/personCtl.js"></script>
    <script type="text/javascript" src="javascripts/dietitian/todayCalorieCtl.js"></script>
    <script type="text/javascript" src="javascripts/dietitian/todayNutritionCtl.js"></script>
    <script type="text/javascript" src="javascripts/dietitian/todayHistoryCtl.js"></script>
<% } %>
<script>
angular.module("dietitian")
.constant("person", <%- JSON.stringify(person) %>)
.constant("dietitian_token", "<%- dietitian_token %>");
</script>
</head>

<body ng-controller="rootCtl">
    <div class="container root-container" style="margin-top: 20px; margin-bottom: 40px;" ng-cloak="true">
        <!-- Person Profile Area -->
        <div ng-controller="personCtl" id="person_profile" style="margin-bottom: 40px;">

            <!-- Progress Bar -->
            <div ng-show="ui.remoting.isRemoting">
                <div class="progress">
                    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="100" aria-valuemax="100" style="width: 100%">
                        <span class="sr-only">{{ui.remoting.status}}</span>
                    </div>
                </div>
            </div><!-- Progress Bar -->

            <!-- Edit Button -->
            <div class="person-edit-button-container" style="text-align:right;">
                <button class="btn btn-default" type="button" ng-click="openPersonForm(ui.person)" ng-disabled="ui.remoting.isRemoting"><span class="glyphicon glyphicon-pencil"></span>&nbsp;編集</button>
            </div><!-- Edit Button -->

            <!-- Personal Profile -->
            <div class="row">
                <div class="col-sm-3 person-icon-container">
                    <img ng-src="{{ui.person.picture_url}}" class="img-circle person-icon"></img>
                </div>

                <div class="col-sm-9">
                    <div style="margin-bottom:10px;" class="person-name-container">
                        <span class="person-name">{{ui.person.display_name}}</span>
                    </div>

                    <div class="row" style="text-align:center;">
                        <div class="col-xs-3">
                            <div class="profile-attr-label">年齢</div>
                            <div class="profile-attr-value">{{ui.person.age}} 歳</div>
                        </div>
                        <div class="col-xs-3">
                            <div class="profile-attr-label">性別</div>
                            <div class="profile-attr-value">{{getSexLabel(ui.person.sex)}}</div>
                        </div>
                        <div class="col-xs-3">
                            <div class="profile-attr-label">身長</div>
                            <div class="profile-attr-value">{{ui.person.height}} cm</div>
                        </div>
                        <div class="col-xs-3">
                            <div class="profile-attr-label">活動量</div>
                            <div class="profile-attr-value">{{ui.person.activity}}</div>
                        </div>
                    </div>
                </div>
            </div><!-- Personal Profile -->

        </div><!-- Person Profile Area -->


        <!-- Summary Area -->
        <div>
            <div style="font-size: 2.0em; border-bottom: solid 1px #ddd; padding: 10px 0; margin-bottom: 20px;">今日のサマリー</div>

            <!-- Tab Bar -->
            <ul class="nav nav-tabs" ng-init="ui.summaryTab.currentTab = 'calorie'" style="margin-bottom: 10px;">
                <li ng-class="(ui.summaryTab.currentTab == 'calorie') ? 'active' : ''"><a href="#" class="tab_label" ng-click="setCurrentTab($event,'summaryTab','calorie')"><span class="glyphicon glyphicon-fire"></span>&nbsp;カロリー</a></li>
                <li ng-class="(ui.summaryTab.currentTab == 'nutrition') ? 'active' : ''"><a href="#" class="tab_label" ng-click="setCurrentTab($event,'summaryTab','nutrition')"><span class="glyphicon glyphicon-heart"></span>&nbsp;栄養</a></li>
            </ul>

            <!-- Tab Content -->
            <div>
                <!-- カロリータブ -->
                <div id="tab_calorie" ng-show="ui.summaryTab.currentTab == 'calorie'" style="padding:10px 5px;">
                    <% include ./components/tab_todayCalorie %>
                </div>

                <!-- 栄養タブ -->
                <div id="tab_nutrition" ng-show="ui.summaryTab.currentTab == 'nutrition'" style="padding:10px 5px;">
                    <% include ./components/tab_todayNutrition %>
                </div>
            </div>
        </div><!-- Summary Area -->


        <!-- History Area -->
        <div ng-controller="todayHistoryCtl">
            <div style="font-size: 2.0em; border-bottom: solid 1px #ddd; padding: 10px 0; margin-bottom: 20px;">食事履歴</div>

            <!-- モバイル専用の朝食/昼食/夕食の切り替えタブ -->
            <div id="today-diet-report-mobile">
                <ul class="nav nav-tabs" ng-init="ui.dietTab.currentTab = 'breakfast'" style="margin-bottom: 10px;">
                    <li ng-class="(ui.dietTab.currentTab == 'breakfast') ? 'active' : ''"><a href="#" class="tab_label" ng-click="setCurrentTab($event,'dietTab','breakfast')">朝食</a></li>
                    <li ng-class="(ui.dietTab.currentTab == 'lunch') ? 'active' : ''"><a href="#" class="tab_label" ng-click="setCurrentTab($event,'dietTab','lunch')">昼食</a></li>
                    <li ng-class="(ui.dietTab.currentTab == 'dinner') ? 'active' : ''"><a href="#" class="tab_label" ng-click="setCurrentTab($event,'dietTab','dinner')">夕食</a></li>
                </ul>

                <div ng-show="ui.dietTab.currentTab == 'breakfast'">
                    <today-diet-report-by-type-mobile diet-type-label="朝食" diet-list="ui.dietListByType.breakfast"></today-diet-report-by-type>
                </div>

                <div ng-show="ui.dietTab.currentTab == 'lunch'">
                    <today-diet-report-by-type-mobile diet-type-label="昼食" diet-list="ui.dietListByType.lunch"></today-diet-report-by-type>
                </div>

                <div ng-show="ui.dietTab.currentTab == 'dinner'">
                    <today-diet-report-by-type-mobile diet-type-label="夕食" diet-list="ui.dietListByType.dinner"></today-diet-report-by-type>
                </div>
            </div>

            <div id="today-diet-report">
                <!-- 朝食 -->
                <today-diet-report-by-type diet-type-label="朝食" diet-list="ui.dietListByType.breakfast"></today-diet-report-by-type>

                <!-- 昼食 -->
                <today-diet-report-by-type diet-type-label="昼食" diet-list="ui.dietListByType.lunch"></today-diet-report-by-type>

                <!-- 夕食 -->
                <today-diet-report-by-type diet-type-label="夕食" diet-list="ui.dietListByType.dinner"></today-diet-report-by-type>
            </div>
        </div><!-- History Area -->

    </div>

    <script type="text/ng-template" id="personForm">
        <% include ./components/personForm %>
    </script>

    <script type="text/ng-template" id="todayDietReportByType">
        <% include ./components/todayDietReportByType %>
    </script>

    <script type="text/ng-template" id="todayDietReportByTypeMobile">
        <% include ./components/todayDietReportByTypeMobile %>
    </script>

</body>

</html>
